import { useState, useEffect, Component, useReducer } from "react"
// useState 方法的返回值是什么？ 返回值为：当前 state 以及更新 state 的函数 所组成的数组
// useState参数为count变量的初始值


import C from './component'
import { Provider } from "./context"

import reducer from "./reducer"

// useEffect 会在每次渲染后都执行(可控制)
// useEffect 的参数是一个函数 该函数在 第一次渲染之后和每次更新之后 执行
// 可以把 useEffect 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
function App() {
  // const [count, setCount] = useState(0)
  // const [flag, setFlag] = useState(false)


  let [{ count, flag }, dispatch] = useReducer(reducer, {
    count: 0,
    flag: false
  })




  useEffect(() => {
    console.log("useEffect " + count) //第一次执行 第二次之后 后执行  (A)
    return () => {
      console.log(count)// 第一次不执行  第二次之后 先执行            (B)
    }
  }, [count])
  //useEffect第二个参数可选,如果为空数组,则这两处的函数都只执行一次(按顺序)   
  //若不为空数组,则除了初始化执行(A)之外    仅当数组中的 state 发生变化时 这两处的函数才执行(按顺序) 


  return (
    <div style={{
      "display": "flex",
      "justifyContent": "center",
      "alignItems": "center",
      "width": "100vw",
      "height": "100vh",
      "flexDirection": "column"
    }}>
      <span>{count}</span><br />
      <div>
        {/* <button onClick={() => setCount(count - 1)}>-1</button>&nbsp;&nbsp;
        <button onClick={() => setCount(count + 1)}>+1</button> */}
        {/* 使用 usestate 时*/}


        <button onClick={() => dispatch({ type: "dec" })}>-1</button>&nbsp;&nbsp;
        <button onClick={() => dispatch({ type: "inc" })}>+1</button>
        {/* 使用 useReducer 时*/}
      </div>
      <br />
      {/* {
        flag ? <Component_one state={flag}/> : <Component_two state={flag}/>
      }
      {
        flag ? <C1 /> : <C2 />
      } */}
      {
        flag ? <C_one /> : <C_two />
      }
      <br />
      {/* <button onClick={() => setFlag(!flag)}>切换</button> */}
      {/* 使用 usestate 时*/}

      <button onClick={() => dispatch({type:"flag_change"})}>切换</button>
      {/* 使用 useReducer 时*/}
      
      <Provider value={{ count }}>
        <C />
      </Provider>
    </div>
  );
}

// 函数组件
function Component_one(props) {
  useEffect(() => {
    return () => {
      console.log("Component_one_will_unMount")
    }
  }, [props.flag])
  return <div>one</div>
}
function Component_two(props) {
  useEffect(() => {
    return () => {
      console.log("Component_two_will_unMount")
    }
  }, [props.flag])
  return <div>two</div>
}

function C_one() {
  useEffect(() => {
    console.log("xixi")
    return () => {
      console.log("Component_one_will_unMount")
    }
  }, [])
  return <div>one</div>
}
function C_two() {
  useEffect(() => {
    console.log("xixi")
    return () => {
      console.log("Component_two_will_unMount")
    }
  }, [])
  return <div>two</div>
}
// 传统class组件
class C1 extends Component {
  componentWillUnmount() {
    console.log("c1_componentWillUnmount")
  }
  render() {
    return <div>c1</div>
  }
}
class C2 extends Component {
  componentWillUnmount() {
    console.log("c2_componentWillUnmount")
  }
  render() {
    return <div>c2</div>
  }
}
export default App;
